import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {UnitPoolData} from "../../../script/frame/dataSource/DataModel";
import {ColorStr, MainAttr} from "../../../script/type/Type";
import {ThreeChooseOneModel} from "../model/GuiModel";
import * as React from "../../../script/frame/apiModel/gui/React";
import {View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";

interface IProp {
    x: number,
    y: number,
    heroInfo: UnitPoolData,
    hidden: boolean
}
interface IState {
    threeChooseOneModels: ThreeChooseOneModel[];
    selectIndex: number;
}

export default class HerosInfoPage extends React.Element<IProp, IState> {

    render = () => {
        // const yMargin = 0.002;
        const backSize = { h: 0.49800, w: 0.18750 }
        const backPos = { x: 0.56250, y:  0.16600 }
        const unitId = this.props.heroInfo?.id;

        if (unitId) {
            const unitData = DataRouter.getUnitDataByUnitId(unitId);
            const icon = DataRouterUtil.getIconUrlByIconData(unitData)
            const iconSize = { w: 0.04375, h: 0.05810 };

            const name = unitData.Name;
            const nameSize = { w: 0.06250, h: 0.02490 };

            const mainAttr = unitData.Primary;
            let mainStr = '主属性:';
            if (mainAttr === MainAttr.STR) {
                mainStr = mainStr + '力量'
            } else if (mainAttr === MainAttr.AGI) {
                mainStr = mainStr + '敏捷'
            } else if (mainAttr === MainAttr.INT) {
                mainStr = mainStr + '智力'
            }
            const mainAttrSize = { w: backSize.w - iconSize.w, h: 0.02490 };

            const describ = unitData.Ubertip;
            const describSize = { w: backSize.w - 0.05000 , h: 0.05810 };

            const talent = this.props.heroInfo?.talent;
            const abilityData = DataRouter.getAbilityDataById(talent);
            const talentIconSize = { w: 0.03750, h: 0.04980 };
            const talentDesSize = { w: backSize.w - talentIconSize.w - 0.07500, h: 0.10790 };
            let talentIcon;
            let talentDes;
            if (abilityData) {
                talentIcon = DataRouterUtil.getIconUrlByIconData(abilityData);
                talentDes = abilityData.Ubertip;
            }

            let lockStr = '已解锁';
            let fontColor = ColorStr.green;
            if (this.props.heroInfo?.enable) {
            } else {
                const lockDes = this.props.heroInfo?.lockDes;
                if (lockDes) {
                    lockStr = lockDes;
                } else {
                    lockStr = '暂未发布';
                }
                fontColor = ColorStr.red;
            }


            return <View   key={GuiKeys.chooseHeroInfo} style={{ hidden: this.props.hidden, top: backPos.y, left: backPos.x, width: backSize.w, height: backSize.h, paddingL: 0.02500, paddingT: 0.06225 }}>
                <View   key={GuiKeys.chooseHeroInfoIcon} style={{ backgroundImage: icon, width: iconSize.w, height: iconSize.h }}></View>
                <View   key={GuiKeys.chooseHeroInfoNameAttr} style={{ marginL: 0.00625, width: nameSize.w, height: nameSize.h, color: ColorStr.black }}>
                    <View   key={GuiKeys.chooseHeroInfoName} style={{ width: nameSize.w, height: nameSize.h, color: ColorStr.black }}>{name}</View>
                    <View   key={GuiKeys.chooseHeroInfoAttr} style={{ fontSize: 0.01125, width: mainAttrSize.w, height: mainAttrSize.h, color: ColorStr.black }}>{mainStr}</View>
                    <View   key={GuiKeys.chooseHeroInfoLocStr} style={{ color: fontColor, fontSize: 0.01125, width: mainAttrSize.w, height: mainAttrSize.h }}>{lockStr}</View>
                </View>
                <View   key={GuiKeys.chooseHeroInfoDescribe} style={{ fontSize: 0.01125, width: describSize.w, height: describSize.h, marginT: 0.04980, marginB: 0.04980, color: ColorStr.black }}>{describ}</View>

                <View   key={GuiKeys.chooseHeroInfoTalentIcon} style={{ backgroundImage: talentIcon, width: talentIconSize.w, height: talentIconSize.h, marginT: 0.02158 }}></View>
                <View   key={GuiKeys.chooseHeroInfoTalentDes} style={{ fontSize: 0.01125, marginT: 0.02656, marginL: 0.01250, width: talentDesSize.w, height: talentDesSize.h, color: ColorStr.black }}>{talentDes}</View>
            </View>
        }
    }

}